import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { getWebSite, updateSetting } from '@/services/setting';
import { Skeleton, message, Image, Button } from 'antd';
import AliyunOssUpdate from '@/components/AliyunOssUpdate';
import { UploadOutlined } from '@ant-design/icons';

const Index = () => {
  const [initialValues, setInitialValues] = useState(undefined);
  const [formObj] = ProForm.useForm();
  // 设置表单字段的值
  // formObj.filename({fileName: value})
  /**
   * 文件上传成功后
   * @param fileKey
   * @returns {*}
   */
  const setIconKey = (fileKey) => formObj.setFieldsValue({ icon: fileKey });

  useEffect(async () => {
    const response = await getWebSite('website');
    console.log(response);
    setInitialValues({
      icon: response.icon,
      about: response.about,
      title: response.title,
      phone: response.phone,
      keywords: response.keywords,
      record: response.record,
    });
  }, []);

  const updateWebSite = async (data) => {
    console.log(data);
    const params = {
      name: 'website',
      icon: data.icon,
      about: data.about,
      title: data.title,
      phone: data.phone,
      keywords: data.keywords,
      record: data.record,
    };
    // const response = await updateSetting(params)
    // if (response.status === undefined) {
    //   message.success('修改成功')
    // }
  };

  return (
    <PageContainer>
      <div
        style={{
          width: 400,
        }}
      >
        {initialValues === undefined ? (
          <Skeleton avatar paragraph={{ rows: 4 }} />
        ) : (
          <ProForm
            onFinish={(a) => updateWebSite(a)}
            form={formObj}
            initialValues={initialValues}
            submitter={{
              searchConfig: {
                submitText: '提交',
              },
            }}
          >
            <ProForm.Item
              name="icon"
              label="icon小图标"
              rules={[
                {
                  required: true,
                  message: '请输入关于我们',
                },
              ]}
            >
              <div>
                <AliyunOssUpdate
                  accept="image/*"
                  setIconKey={setIconKey}
                  // action={initialValues.icon}
                >
                  <Button icon={<UploadOutlined />}>点击上传</Button>
                </AliyunOssUpdate>

                {!initialValues.icon ? '' : <Image width={100} src={initialValues.icon} />}
              </div>
            </ProForm.Item>
            <ProFormText
              name="about"
              label="关于我们"
              placeholder="请输入关于我们"
              rules={[
                {
                  required: true,
                  message: '请输入关于我们',
                },
              ]}
            />
            <ProFormText
              name="title"
              label="标题"
              placeholder="请输入标题"
              rules={[
                {
                  required: true,
                  message: '请输入标题',
                },
              ]}
            />
            <ProFormText
              name="phone"
              label="手机号"
              placeholder="请输入手机号"
              rules={[
                {
                  required: true,
                  message: '请输入手机号',
                },
                {
                  pattern: /^1\d{10}$/,
                  message: '不合法的手机号格式!',
                },
              ]}
            />
            <ProFormText
              name="keywords"
              label="关键字"
              placeholder="请输入关键字"
              rules={[
                {
                  required: true,
                  message: '请输入关键字',
                },
              ]}
            />
            <ProFormText
              name="record"
              label="备案信息"
              placeholder="请输入备案信息"
              rules={[
                {
                  required: true,
                  message: '请输入备案信息',
                },
              ]}
            />
          </ProForm>
        )}
      </div>
    </PageContainer>
  );
};

export default Index;
